<template>
  <div class="mg-lg">
    <el-form
      v-loading="loading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules || {}"
      label-width="auto"
      status-icon
    >
      <c-main-template
        title="详情"
        minHeight="auto"
        v-if="ruleForm.sellerCarInApply"
      >
        <el-row :gutter="24">
          <el-col :span="8" class="mt-lg">
            <el-form-item label="销售申请单号">
              <span>{{ ruleForm.sellerCarInApply.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label="借款银行：">
              <span>{{ ruleForm.sellerCarInApply.bankName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label="状态：">
              {{ getStatusName(ruleForm.sellerCarInApply) }}
            </el-form-item>
          </el-col>
        </el-row>
      </c-main-template>

      <c-main-template
        title="仓库基本信息"
        minHeight="auto"
        class="mt-lg"
        v-if="ruleForm.storeInfo"
      >
        <el-row :gutter="24">
          <el-col :span="8" class="mt-lg">
            <el-form-item label="车辆入仓仓库：">
              {{ ruleForm.storeInfo.name }}
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label="联系人：">
              {{ ruleForm.storeInfo.contactPerson }}
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label="联系方式：">
              {{ ruleForm.storeInfo.contactPhone }}
            </el-form-item>
          </el-col>
        </el-row>
      </c-main-template>

      <c-main-template title="车辆基本信息" minHeight="auto" class="mt-lg">
        <el-row :gutter="24">
          <el-col :span="24" class="mt-lg mb-lg">
            <c-table-template border :data="ruleForm.carList">
              <el-table-column
                align="left"
                label="车辆信息"
                class-name="my-cell"
              >
                <template #default="scope">
                  <span v-for="(item, index) in k" :key="index">
                    {{ scope.row[item] }}&nbsp;
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="单价（元）"
                class-name="my-cell"
              >
                <template #default="scope">
                  {{ filters.thousands(scope.row.price) }}
                </template>
              </el-table-column>
              <el-table-column align="left" label="车架号" class-name="my-cell">
                <template #default="scope">
                  <div v-for="(item, index) in scope.row.vinList" :key="index">
                    {{ item }}
                  </div>
                </template>
              </el-table-column>
            </c-table-template>
            <div class="car-info_footer">
              <span>共 {{ getCarListSum.num }} 辆车 , 总计</span>
              <span style="color: #ff6355">￥{{ getCarListSum.price }}</span>
            </div>
          </el-col>
        </el-row>
      </c-main-template>

      <c-main-template
        title="合同信息"
        minHeight="auto"
        class="mt-lg"
        v-if="ruleForm.contractList && ruleForm.contractList.length > 0"
      >
        <el-row :gutter="24">
          <el-col :span="24" class="mt-lg mb-lg">
            <c-table-template border :data="ruleForm.contractList">
              <el-table-column
                width="80"
                align="center"
                label="序号"
                type="index"
                class-name="my-cell"
              >
              </el-table-column>
              <el-table-column
                align="left"
                prop="contractName"
                label="合同名称"
                class-name="my-cell"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    link
                    @click="onFileOpen(scope.row.url)"
                    >{{ scope.row.contractName }}</el-button
                  >
                  <span v-if="scope.row.type == 0"> （模板）</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="合同编号"
                prop="contractNb"
                class-name="my-cell"
              />
            </c-table-template>
          </el-col>
        </el-row>
      </c-main-template>
      <c-main-template
        title="支付金额信息"
        minHeight="auto"
        class="mt-lg"
        v-if="ruleForm.earnestMoneyInfo"
      >
        <el-row :gutter="24">
          <el-col :span="8" class="mt-lg">
            <el-form-item label="保证金额：">
              {{ filters.thousands(ruleForm.earnestMoneyInfo.amount) }} 元
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label="公式：">
              {{ ruleForm.earnestMoneyInfo.expression }}
              <c-voucher-details :list="carDetails" />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="mt-lg">
            <el-form-item label=" ">
              <el-button
                type="primary"
                link
                @click="onFileOpen(ruleForm.earnestMoneyInfo.payProofUrl)"
                >查看保证金支付凭证</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </c-main-template>
      <c-main-template
        title="审批意见"
        minHeight="auto"
        class="mt-lg"
        v-if="ruleForm.sellerCarInApply"
      >
        <c-approval-process
          :id="ruleForm.sellerCarInApply.id"
          business="1"
          class="mg-lg wh40"
        />
      </c-main-template>
    </el-form>
  </div>
</template>
<script setup>
import { ref, onMounted, computed, getCurrentInstance } from "vue";
import cApprovalProcess from "@/components/ApprovalProcess/index.vue";
import cVoucherDetails from "@/components/PaymentDetails/index.vue";
import { useRoute } from "vue-router";
import { salesTableType } from "@/utils/status.js";
const { proxy } = getCurrentInstance();
import { useSalesForm } from "./components/index";
import {onFileOpen} from '@/utils/index.js'
const ruleFormRef = ref();
const ruleForm = ref({});
const rules = ref({});

const route = useRoute();
const loading = ref(false);
const carDetails = ref([]);
const getStatusName = computed(() => {
  return (item) => {
    const value = salesTableType.find((x) => x.value === item.status);
    return value.label || "未找到";
  };
});
const { k, getCarListSum } = useSalesForm(ruleForm);
onMounted(() => {
  getById();
});

const getById = () => {
  const id = route.query.id;
  if (id) {
    const params = {
      id,
    };
    loading.value = true;
    proxy
      .$get({
        url: "/sellerCarInApply/getById",
        params,
      })
      .then((res) => {
        res.carList = (res.carListDetailsList || []).map((x) => {
          x.vinList = x.vin.split(",");
          return x;
        });
        // 费用类别(1-保证金，2-贷款，3-利息)
        res.earnestMoneyInfo = res.sellerBill.find((x) => {
          return x.type === 1;
        });
        ruleForm.value = res;

        proxy
          .$get({
            url: "/sellerCarInApply/carDetails",
            params,
          })
          .then((d) => {
            carDetails.value = d;
            loading.value = false;
          });
      });
  }
};
</script>
<style lang="less" scoped>
:deep(.el-table__header .el-table__cell) {
  background: #fafafa !important;
}
:deep(.el-table .my-cell) {
  vertical-align: top;
}
.car-info_footer {
  padding: 11px 16px;
  background: #fafafa;
  font-size: 14px;
  color: #575757;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
</style>